<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="stylesheet">
    <title>HomeWork-04</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color: black;
    }

    body,
    html {
        width: 100%;
        min-height: 100vh;
    }

    .main {
        display: flex;
    }

    .main .nav {
        min-width: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    ul li {
        line-height: 50px;
        list-style-type: none;
    }

    ul li i {
        vertical-align: middle;
    }

    ul li span {
        vertical-align: middle;
        margin-left: 15px;
    }

    @media screen and (max-width: 600px) {
        .content{
            margin-left: 60px;
        }
        .main .nav {
            position: absolute;
            min-width: 50px;
            background-color: #FEB901;
            transition: 1s;
        }

        ul li span {
            /* 隐藏文字 */
            display: none;
        }
        .main .nav:hover{
            min-width: 180px;
        }
        .main .nav:hover ul li{
            width: 180px;
        }
        .main .nav:hover span {
            display: inline;
        }

        ul li:hover {
            margin: 0;
            background-color: white;
        }
        ul li:hover i {
            color: red;
        }
    }
</style>

<body>
    <div class="main">
        <div class="nav">
            <ul>
                <li><a href="#"><i class="material-icons">view_quilt</i><span>Dashboard</span></a></li>
                <li><a href="#"><i class="material-icons">personal_video</i><span>Computer</span></a></li>
                <li><a href="#"><i class="material-icons">timelapse</i><span>Timelapse</span></a></li>
                <li><a href="#"><i class="material-icons">style</i><span>Style</span></a></li>
                <li><a href="#"><i class="material-icons">date_range</i><span>Date</span></a></li>
            </ul>
        </div>
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio ut dolores,
            facilis esse asperiores maiores repellat laborum unde neque iure quasi amet quam fugit sed quos aperiam.
            Dolore, labore.</div>
    </div>
</body>

</html>